<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Add Element</title>
</head>
<body>
    <script type="text/javascript">
        function addElement() {

            var pageSelect = document.getElementById("pageSelect");
            var pageIndex = pageSelect.selectedIndex;
            var pageText = pageSelect.options[pageIndex].value;

            var findFuncSelect = document.getElementById("findFuncSelect");
            var findFuncIndex = findFuncSelect.selectedIndex;
            var findFuncText = findFuncSelect.options[findFuncIndex].value;

            var anotherFindFuncSelect = document.getElementById("anotherFindFuncSelect");
            var anotherFindFuncIndex = anotherFindFuncSelect.selectedIndex;
            var anotherFindFuncText = anotherFindFuncSelect.options[anotherFindFuncIndex].value;

            var elementName = document.getElementById("elementNameInput").value;
            var findParams = document.getElementById("findParamsInput").value;
            var anotherFindParams = document.getElementById("anotherFindParamsInput").value;
            //请求参数
            var list = {
                "pageID": pageText,
                "elementName":elementName,
                "findFunc": findFuncText,
                "findParams": findParams,
                "anotherFindFunc":anotherFindFuncText,
                "anotherFindParams":anotherFindParams
            };
            console.log(list);
            //
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://127.0.0.1:8888/uitest/elements/add",
                //数据，json字符串
                data : JSON.stringify(list),
                //请求成功
                success : function(result) {
                    console.log("result");
                    console.log(result);
                    console.log("resultEnd");
                    location.reload();
                    alert(result);
                    window.location="http://127.0.0.1:8888/uitest/elementsPage";
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        function getModels() {
            document.getElementById("modelSelect").options.length = 1;
            document.getElementById("pageSelect").options.length = 0;
            var systemSelect = document.getElementById("systemSelect");
            var systemIndex = systemSelect.selectedIndex;
            var systemText = systemSelect.options[systemIndex].value;
            console.log(systemIndex,systemSelect);
            //请求参数
			var list = {
                "systemID": systemText
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/models",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						modelId = result[i].id;
						modelName = result[i].model_name;
                        document.getElementById("modelSelect").options.add(new Option(modelName,modelId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }

        window.onload = function getSystem(){
            // get systems
            $.ajax({
                //请求方式
                type : "GET",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "http://127.0.0.1:8888/uitest/systems",
                //数据，json字符串
                data : null,
                //请求成功
                success : function(result) {
                    console.log("result");
                    console.log(result);
                    console.log("resultEnd");

                    result.forEach(systemNameDic => {
                        var systemId = systemNameDic.id;
                        var systemName = systemNameDic.system_name;
                        document.getElementById("systemSelect").options.add(new Option(systemName,systemId));
                    });
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

        function updatePages() {
            var modelSelect = document.getElementById("modelSelect");
            var modelIndex = modelSelect.selectedIndex;
            var modelText = modelSelect.options[modelIndex].value;
            //请求参数
			var list = {
                "modelID": modelText
            };
			//
			$.ajax({
				//请求方式
				type : "POST",
				//请求的媒体类型
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url : "http://127.0.0.1:8888/uitest/pages",
				//数据，json字符串
				data : JSON.stringify(list),
				//请求成功
				success : function(result) {
					console.log("result");
					console.log(result);
					console.log("resultEnd");
					for (var i = result.length - 1; i >= 0; i--) {
						pageId = result[i].id;
						pageName = result[i].page_name;
						document.getElementById("pageSelect").options.add(new Option(pageName,pageId));
					}
				},
				//请求失败，包含具体的错误信息
				error : function(e){
					console.log(e.status);
					console.log(e.responseText);
				}
			});
        }

    </script>
<div>
    <div style="text-align: center;">
        <h1>Add Element</h1>
    </div>
	
    <div id="system" style="text-align:left; margin-top: 50px; margin-left: 15%">
        System: <select id="systemSelect" onchange="getModels()">
            <option></option>
        </select>
    </div>
    <div id="models" style="text-align:left; margin-top: 50px; margin-left: 15%">
        Model: <select id="modelSelect" onchange="updatePages()">
            <option></option>
        </select>
    </div>
    <div id="pages" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Page: <select id="pageSelect">
        </select>
    </div>
    <div id="elementName" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Element Name: <input id="elementNameInput" type="text" size="50px" name="elementName" placeholder="Please input elementName with string" />
    </div>

    <div id="findFunc" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Find Func: <select id="findFuncSelect">
            <option value="1">id</option>
            <option value="2">xPath</option>
            <option value="3">CSS Selector</option>
        </select>
    </div>
    <div id="findParams" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Find Params: <input id="findParamsInput" type="text" size="50px" name="findParams" placeholder="Please input findParams with string" />
    </div>

    <div id="anotherFindFunc" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Another Find Func: <select id="anotherFindFuncSelect">
            <option value="1">id</option>
            <option value="2">xPath</option>
            <option value="3">CSS Selector</option>
        </select>
    </div>
    <div id="anotherFindParams" style="text-align:left; margin-top: 50px; margin-left: 15%">
		Another Find Params: <input id="anotherFindParamsInput" type="text" size="50px" name="anotherFindParams" placeholder="Please input anotherFindParams with string" />
    </div>
    
    <div id="addBtn" style="text-align:left; margin-top: 50px; margin-left: 15%">
		<button type="button" onclick="addElement()">Confirm</button>
    </div>
</div>

</body>
</html>